<template>
  <div id="app" class="app-wrapper">
    <!-- <AmisDemo /> -->
<el-row>
   <el-button @click="changePreview">预览</el-button>
   <el-button @click="getEditorJson">预览</el-button>

   {{ editorJson }}
</el-row>
    <el-row>
      <el-col :span="4">
  <el-button>默认按钮</el-button>

    
      </el-col>
      <el-col :span="20">
        <editor ref="editor" :isPreview="isPreview" :value="value"></editor>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// import AmisDemo from './components/amis-demo/AmisDemo.vue'
import Editor from "./components/amis/AmisEditor.vue";
export default {
  name: "App",
  components: {
    // AmisDemo,
    Editor,
  },
  data() {
    return {
      editorProps: {},
      isPreview: false,
      editorJson: '',
      value: {"message":"hello","body":[{"type":"crud","syncLocation":false,"api":{"method":"get","url":""},"columns":[{"name":"id","label":"ID","type":"text"},{"name":"engine","label":"渲染引擎","type":"text"}],"bulkActions":[],"itemActions":[],"id":"u:85f986963dbf"}]}
    };
  },
  methods: {
    changePreview() {
      this.isPreview = !this.isPreview
    },
    getEditorJson() {
      this.editorJson = this.$refs.editor.getSchema()
    }
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
.app-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
</style>
